<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>个人中心</title>
		<link href="/css/bootstrap.min.css" rel="stylesheet">

			<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<style>
	body {
		padding-top: 50px;
		padding-bottom: 40px;
		color: #5a5a5a;
	}
	
	/* 下面是左侧导航栏的代码 */
	.sidebar {
		position: fixed;
		top: 51px;
		bottom: 0;
		left: 0;
		z-index: 1000;
		display: block;
		padding: 20px;
		overflow-x: hidden;
		overflow-y: auto;
		background-color: #ddd;
		border-right: 1px solid #eee;
	}
	
	.nav-sidebar {
		margin-right: -21px;
		margin-bottom: 20px;
		margin-left: -20px;
	}
	
	.nav-sidebar>li>a {
		padding-right: 20px;
		padding-left: 20px;
	}
	
	.nav-sidebar>.active>a, .nav-sidebar>.active>a:hover, .nav-sidebar>.active>a:focus
		{
		color: #fff;
		background-color: #428bca;
	}
	
	.main {
		padding: 20px;
	}
	
	.main .page-header {
		margin-top: 0;
	}
</style>
</head>

<body>
	<!--下面是顶部导航栏的代码-->
	<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
	<div class="container-fluid">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed"
				data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
				<span class="sr-only">Toggle navigation</span> <span
					class="icon-bar"></span> <span class="icon-bar"></span> <span
					class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="/"><img src="picture/logo.png" /></a>
		</div>

		<div class="collapse navbar-collapse"
			id="bs-example-navbar-collapse-1">
			<ul class="nav navbar-nav">
				<li class="dropdown"><a href="#" class="dropdown-toggle"
					data-toggle="dropdown">个人中心<span class="caret"></span></a>
					<ul class="dropdown-menu" role="menu">
						<li><a href="#" onclick="showUserinfo()">个人信息</a></li>
						<li><a href="#" onclick="showAddress()">收货地址</a></li>
						<li><a href="#" id="safe">安全信息</a></li>
					</ul></li>
				<li><a href="#">帮助</a></li>
			</ul>
			<form class="navbar-form navbar-right" role="search">
				<div class="form-group">
					<input type="text" class="form-control" placeholder="...">
				</div>
				<button type="submit" class="btn btn-default">搜索</button>
			</form>
		</div>
	</div>
	</nav>

	<!—自适应布局-->
	<div class="container-fluid">
		<div class="row">
			<!—左侧导航栏-->

			<div class="col-sm-3 col-md-2 sidebar">
				<ul class="nav nav-sidebar">
					<li class="active"><a href="/">首页</a></li>
				</ul>
				<ul class="nav nav-sidebar">
					<li><strong>个人中心</strong></li>
					<li><a href="#" onclick="showUserinfo()">个人信息</a></li>
					<li><a href="#" onclick="showAddress()">收货地址</a></li>
					<li><a href="#" id="safe">安全信息</a></li>
				</ul>
				<ul class="nav nav-sidebar">
					<li><strong>购物信息</strong></li>
					<li><a href="/shoppingCart" id="shoppingCart">购物车</a></li>
					<li><a href="/order" id="order">我的订单</a></li>
					<li><a href="/help" id="help">帮助</a></li>
				</ul>
			</div>

			<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
				<form id="upload-form" action="" method="post"
					enctype="multipart/form-data">
					<input type="file" id="upload" name="upload" /> <br></br> <input
						type="submit" value="Upload"></input>
				</form>
			</div>

			<script src="/js/jquery.min.js"></script>
			<script src="/js/bootstrap.min.js"></script>
			<script>
				$(document).ready(function(){
					$("#userinfo").show();
					$("#address").hide();
					});
				function showUserinfo(){
					$("#userinfo").show();
					$("#address").hide();
				}
				function showAddress(){
					$("#userinfo").hide();
					$("#address").show();
				}
			</script>
</body>
</html>



